<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>新建收款记录</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<style type="text/css">
			body {
				background-color: #f3f3f5;
			}
			.btn {
				width: 5.21rem;
				height: 0.71rem;
				margin: 7.33rem 1.15rem 0 1.15rem;
				border-radius: 1.42rem;
				background-color: #e22e30;
				color: #fff;
				font-size: 0.41rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<van-cell-group>
					<van-cell
						title="患者"
						is-link
						:value="flowPatientName"
						@click="toSearch"
					></van-cell>
					<van-cell title="手机号码" :value="flowPatientMobile"></van-cell>
					<van-field
						v-model="form.flowPrice"
						label="金额"
						type="number"
						placeholder="请输入收款金额"
						input-align="right"
					></van-field>
					<van-cell
						title="渠道来源"
						is-link
						:value="form.flowChannel||'请选择渠道来源'"
						@click="show = true"
					></van-cell>
					<van-action-sheet
						v-model:show="show"
						:actions="actions"
						@select="onSelect"
					></van-action-sheet>
					<van-field
						v-if="flowType==2"
						v-model="form.flowRefundReason"
						label="退款原因"
						maxlength="20"
						placeholder="请输入退款原因（选填）"
						input-align="right"
					></van-field>
				</van-cell-group>
				<van-button class="btn" @click="onSubmit">确定</van-button>
			</div>
			<link-index></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'

		const PatientData = {
			data() {
				return {
					form: {},
					show: false,
					actions: [],
					flowType: '',
					orgCode: '',
				}
			},
			computed: {
				flowPatientMobile() {
					return this.form.flowPatientMobile || ''
				},
				flowPatientName() {
					return this.form.flowPatientName || '请选择患者'
				},
				flowChannel() {
					return this.form.flowChannel || '请选择渠道来源'
				},
			},
			created() {
				this.doctorId = url('?id')
				this.orgCode = url('?orgCode')
				this.getActions()
				this.form = JSON.parse(sessionStorage.getItem('form')) || {}
				this.flowType = this.form.flowType
			},
			methods: {
				getActions() {
					getAction(spliceUrl('/sys/sysDepart/queryTreeList')).then(res => {
						res = res.data
						console.log('queryTreeList', res)
						if (res.success) {
							this.actions = res.result[0].children.map(v => {
								return {
									name: v.title,
								}
							})
						}
					})
				},
				toSearch() {
					sessionStorage.setItem('form', JSON.stringify(this.form))
					window.location.href =
						'./searchPatient.html?id=' +
						this.doctorId +
						'&orgCode=' +
						this.orgCode
				},
				onSelect(item) {
					this.form.flowChannel = item.name
					this.show = false
				},
				check() {
					if (!this.form.flowPatientName) {
						this.$toast.fail({
							duration: 0,
							message: '请选择患者!',
						})
						return
					}
					if (!this.form.flowPrice) {
						this.$toast.fail({
							duration: 0,
							message: '请输入收款金额!',
						})
						return
					}
					if (!this.form.flowChannel) {
						this.$toast.fail({
							duration: 0,
							message: '请选择渠道来源!',
						})
						return
					}
					return true
				},
				onSubmit() {
					this.check()
					this.form.flowDoctorId = this.doctorId
					this.form.flowPrice = Number(this.form.flowPrice).toFixed(2)
					this.form.orgCode = this.orgCode
					postAction(spliceUrl('/payrefund/save'), this.form).then(res => {
						res = res.data
						if (res.success) {
							sessionStorage.removeItem('form')
							window.location.href =
								'./receipt.html?id=' +
								this.doctorId +
								'&orgCode=' +
								this.orgCode +
								'&type=' +
								this.flowType
						}
					})
				},
			},
			components: {
				linkIndex: linkIndex,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
